<!--
 * @Description: 个人中心
 * @Author: liu (1427179517@qq.com)
 * @Date: 2022-01-08 14:03:30
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-13 10:05:12
 * @FilePath: \jiekuan-app\src\pages\center\center.vue
-->
<template>
	<div class="page">
		<div class="page-header">
			<u-navbar title="我的" :background="nav_background" title-color="#fff" back-icon-color="#fff" :height="60"
				:is-back="false" :border-bottom="false">
				<div slot="right" class="edit u-flex u-col-center u-p-l-15 u-m-r-18"
					@click="handleClick({ type: 'editProfile' })">
					<image src="../../static/images/write.png" class="edit_icon u-m-r-6" alt="" />编辑资料
				</div>
			</u-navbar>
		</div>
		<div class="page-content u-p-0">
			<div class="u-p-l-25 u-p-r-25 u-rela">
				<!-- 个人信息 -->
				<div class="u-m-t-20 user_msg u-flex">
					<image :src="userInfo.icon" class="avatar u-m-r-28" alt="" />
					<div class="flex u-m-t-12">
						<div class="msg_tags u-m-r-20">
							<span v-if="userInfo.gender">{{ gender_msg[userInfo.gender] }}·</span> 25岁
						</div>
						<template v-if="tagsList && tagsList.length">
							<div class="msg_tags u-m-r-20" v-for="(item, index) in tagsList" :key="index">
								{{ item }}
							</div>
						</template>
						<!-- <div class="msg_tags u-m-r-20">宁波市</div>
            <div class="msg_tags u-m-r-20">程序员</div>
            <div class="msg_tags u-m-r-20">健身</div> -->
					</div>
				</div>
				<div class="name u-m-t-30">{{ userInfo.nickname }}</div>
				<div class="signature u-m-t-30">{{ userInfo.personalizedSignature }}</div>
			</div>
			<div class="content_box u-m-t-30 u-p-l-25 u-p-r-25 u-p-t-30">
				<!-- 钱包 -->
				<div class="u-flex wallet">
					<div class="flex-1" @click="handleClick({ type: 'myLove', query: { type: 1 } })">
						<div>{{ userInfo.userInfo || 0 }}</div>
						<span class="text u-m-t-14">我喜欢</span>
					</div>
					<div class="flex-1" @click="handleClick({ type: 'myLove', query: { type: 2 } })">
						<div>{{ userInfo.meLikeCounts || 0 }}</div>
						<span class="text u-m-t-14">喜欢我</span>
					</div>
					<div class="flex-1" @click="handleClick({ type: 'withdrawal' })">
						<div>{{ userInfo.luckyCoin }}</div>
						<span class="text u-m-t-14">钱包</span>
					</div>
				</div>
				<!-- vip -->
				<div class="vip u-m-t-38 u-flex u-col-center u-row-between">
					<image src="../../static/images/vip.png" class="vip_icon" alt="" />
					<div class="u-flex">
						<span class="vip_text">尊享VIP免费特权</span>
						<button class="open_vip u-m-l-25" @click="handleClick({ type: 'vip' })">立即开通</button>
					</div>
				</div>
				<div class="u-flex u-row-between u-col-center album u-m-t-30">
					<div>我的相册/视频</div>
					<div class="u-flex u-col-center" @click="handleClick({ type: 'uploadPhotos' })">
						<image src="../../static/images/upload_img.png" class="upload_icon u-m-r-10" alt="" />
						<span>上传相册/视频</span>
					</div>
				</div>
				<div class="albums">
					<template v-if="albumList && albumList.length">
						<div class="u-m-t-20 flex u-m-b-20">
							<div class="album_item u-m-r-20 u-m-b-20 u-rela" v-for="(item,index) in albumList"
								:key="item.sourceUrl">
								<template v-if="item.sourceType">
									<video :src="item.sourceUrl" class="album_item_img" alt="" />
									<div @click="preview_video(item.sourceUrl)"></div>
								</template>
								<template v-else>
									<image @click="preview_img(item.sourceUrl,index)" :src="item.sourceUrl" class="album_item_img" mode="" />
								</template>
							</div>
						</div>
					</template>
					<template v-else>
						<div class="u-m-t-50 u-m-b-40">
							暂无照片<br />
							快上传最美的照片、视频，吸引对方的青睐吧！
						</div>
					</template>
				</div>
				<!-- 邀请 -->
				<div class="invite u-m-b-30 u-flex u-row-between u-col-center">
					<div class="u-flex u-col-center">
						<image src="../../static/images/add-user.png" class="invite_icon u-m-r-14" alt="" />
						<span>邀请福利</span>
					</div>
					<div class="u-flex">
						<span class="invite_text">尊享VIP免费特权</span>
						<button class="open_vip u-m-l-25" @click="handleClick({ type: 'inviteWelfare' })">查看详情</button>
					</div>
				</div>
				<!-- 底部各项信息 -->
				<div v-for="(item, index) in list" :key="index" class="list_item u-flex u-row-between u-col-center"
					@click="handleClick({ type: item.click })">
					<div class="u-flex u-col-center">
						<image :src="item.img" class="item_img u-m-r-25" alt="" />
						<span>{{ item.name }}</span>
						<span class="text u-m-l-62" v-if="item.text">{{ item.text }}</span>
					</div>
					<image src="../../static/images/user_next.png" class="next_icon" alt="" />
				</div>
			</div>
		</div>
		<div class="page-footer">
			<customizeTabbar></customizeTabbar>
		</div>
		<u-no-network></u-no-network>
		<view-loading :loading="loadingSkeleton"></view-loading>
		<u-popup v-model="isPopup" mode="center" :width="popupKeys === 'selection' ? '500' : '600'" border-radius="25">
			<view class="pop_box text-center u-rela" :class="{ pop_box2: popupKeys === 'survey' }">
				<image src="../../static/images/authentication_close.png" class="authentication_close" alt=""
					@click="isPopup = false" />
				<template v-if="popupKeys === 'selection'">
					<div class="title">领取福利</div>
					<div class="text u-m-t-30">微信扫码，获取第一手活动信息。</div>
					<image src="" class="qr_code u-m-t-18" alt="" />
					<div class="u-m-t-25">
						<button class="btn">保存图片</button>
					</div>
				</template>
				<template v-else>
					<div class="title">我的评价</div>
					<div class="u-m-t-46 flex">
						<div class="evaluate u-m-b-20">
							身材<u-rate :count="5" size="20" gutter="5" inactive-color="#FFC107" active-color="#FFC107"
								v-model="evaluate.figure"></u-rate>
						</div>
						<div class="evaluate u-m-b-20 u-m-l-60">
							颜值<u-rate :count="5" size="20" gutter="5" inactive-color="#FFC107" active-color="#FFC107"
								v-model="evaluate.appearance"></u-rate>
						</div>
						<div class="evaluate">
							有趣<u-rate :count="5" size="20" gutter="5" inactive-color="#FFC107" active-color="#FFC107"
								v-model="evaluate.interesting"></u-rate>
						</div>
						<div class="evaluate u-m-l-60">
							情商<u-rate :count="5" size="20" gutter="5" inactive-color="#FFC107" active-color="#FFC107"
								v-model="evaluate.eq"></u-rate>
						</div>
					</div>
					<div class="text u-m-t-60 u-p-t-8">综合评分4.0</div>
				</template>
			</view>
		</u-popup>
		<div class="popup" v-if="video_url">
			<image class="popup_close" @click="video_url = null" src="../../static/images/authentication_close.png" mode=""></image>
			<video class="popup_imgs" :src="video_url"></video>
		</div>
		<div class="popup" v-if="image_url">
			<image class="popup_close" @click="image_url = null" src="../../static/images/authentication_close.png" mode=""></image>
			<image class="popup_imgs" :src="image_url" mode="widthFix"></image>
		</div>
	</div>
</template>

<script>
	import customizeTabbar from '@/components/customizeTabbar'

	export default {
		name: '', // 页面名称
		components: {
			customizeTabbar
		}, // 挂载组件
		props: {}, // 组件传值
		data() {
			return {
				loadingSkeleton: false, // 页面等待
				nav_background: {
					backgroundImage: 'transparent'
				},
				userInfo: {}, // 用户信息
				list: [{
						img: '../../static/images/user_verify.png',
						name: '认证中心',
						click: 'authentication'
					},
					{
						img: '../../static/images/user_communications.png',
						name: '联系方式',
						click: 'contactInformation',
						text: '修改微信需要客服核实',
					},
					{
						img: '../../static/images/user_trends.png',
						name: '我的动态',
						click: 'myUpdates'
					},
					{
						img: '../../static/images/user_survey.png',
						name: '我的评价',
						click: 'survey'
					},
					{
						img: '../../static/images/user_fk.png',
						name: '问题反馈',
						click: 'feedback'
					},
					{
						img: '../../static/images/user_service.png',
						name: '客服助手',
						click: 'service',
						text: '遇到问题点击这里'
					},
					{
						img: '../../static/images/user_setting.png',
						name: '设置',
						click: 'setting'
					},
					// { img: '../../static/images/user_out.png', name: '退出登录', click: 'out' },
				], // 办理事项
				scrollTop: 0, // 页面滚动高度
				isPopup: false, // 弹窗
				popupKeys: '', // 弹窗类型
				evaluate: {
					figure: 2, // 身材
					appearance: 3, // 颜值
					interesting: 4, // 有趣
					eq: 5, // 情商
				}, // 评价
				gender_msg: {
					0: '未知',
					1: '男',
					2: '女',
				}, // 性别
				tagsList: [], // 标签
				albumList: [], // 相册
				video_url: "",
				image_url :""
			}
		},
		computed: {}, // 计算机属性 类似与data概念
		watch: {}, // 监控data中数据变化
		created() {}, // 生命周期-创建完成(可以访问当前this实例)
		mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			preview_img:function(url,index){
				var that = this;
				var albumList = that.albumList;
				if(albumList[index].readType == 0){
					that.image_url = url;
				}else{
					that.image_url = url;
					albumList.splice(index,1);
					that.albumList = albumList;
					this.$toast('阅后即焚，只可查看一次')
				}
			},
			preview_video: function(url) {
				var that = this;
				that.video_url = url;
			},
			// 获取用户信息
			apiGetInfo() {
				this.$u.api.info().then((res) => {
					const {
						data
					} = res
					const tagsList = data.tags ? data.tags.split(',') : []
					this.tagsList = tagsList
					this.userInfo = data
					uni.setStorageSync('mobile', res.data.username)
					this.loadingSkeleton = false
				})
			},
			// 我的相册信息
			apiGetAlbumInfo() {
				this.$u.api.GetAlbumInfo().then((res) => {
					this.albumList = res.data
				})
			},
			// 页面跳转事件
			handleClick(options) {
				const {
					type,
					query = {}
				} = options
				switch (type) {
					case 'authentication': // 认证
						if (this.userInfo.approveFlag == -1) {
							this.$toast('待审核')
						}else if(this.userInfo.approveFlag == 1){
							this.$toast('你已认证')
						} else {
							this.$jump({
								name: type,
								query
							})
						}
						break
					case 'selection': // 关注公众号
						this.isPopup = true
						this.popupKeys = type
						break
					case 'survey': // 我的评价
						this.isPopup = true
						this.popupKeys = type
						break
					case 'out':
						this.apiLogout()

						break
					default:
						this.$jump({
							name: type,
							query
						})
						break
				}
			},

			// 退出登录
			apiLogout() {
				this.$u.api.logout().then((res) => {
					this.$u.toast('退出成功~')
					setTimeout(() => {
						uni.clearStorageSync()
						this.$jump({
							name: 'login',
							type: 'replaceAll'
						})
					}, 2000)
				})
			},
		}, // 挂载一些方法
		onLoad(options) {
			console.log('onLoad', options, Date.now())
		}, // 生命周期回调—监听页面加载
		onShow() {
			this.apiGetInfo()
			this.apiGetAlbumInfo()
		}, // 生命周期回调—监听页面显示
		onReady() {}, // 生命周期回调—监听页面初次渲染完成
		onHide() {}, // 生命周期回调—监听页面隐藏
		onUnload() {}, // 生命周期回调—监听页面卸载
	}
</script>

<style lang="scss" scoped>
	.page,
	.content_box {
		background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.page-header,
	.page-content {
		background: transparent;
	}

	.page-content {
		height: 100vh !important;
	}

	.top {
		font-size: 35rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffb159;
		padding-top: 63rpx;
		padding-right: 25rpx;
		text-align: center;
		position: fixed;
		width: 100%;
		top: 0;
		right: 0;
	}

	.top_img {
		background-image: linear-gradient(to right, #5735b0, #3d4ad8);
	}

	.edit {
		width: 145rpx;
		height: 45rpx;
		background: #fcaa0c;
		border-radius: 23rpx;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #323232;
	}

	.edit_icon {
		width: 16rpx;
		height: 18rpx;
	}

	.user_msg {
		align-items: flex-start;
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background: #000;
	}

	.msg_tags {
		padding: 7rpx 14rpx;
		box-sizing: border-box;
		height: 35rpx;
		background: rgba($color: #000000, $alpha: 0.3);
		border-radius: 3rpx;
		text-align: center;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
		line-height: 21rpx;
		margin-bottom: 15rpx;
	}

	.name {
		font-size: 31rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
	}

	.signature {
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #dcdcdc;
	}

	.wallet {
		font-size: 31rpx;
		font-family: Microsoft YaHei UI;
		font-weight: bold;
		color: #d7443e;
		text-align: center;

		.text {
			font-size: 21rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.vip {
		background-image: url(../../static/images/vipbg.png);
		width: 100%;
		height: 104rpx;
		background-size: cover;
		background-repeat: no-repeat;
		padding: 0 40rpx;
	}

	.vip_icon {
		width: 81rpx;
		height: 51rpx;
	}

	.vip_text {
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffdf50;
	}

	.open_vip {
		height: 45rpx;
		background: #ffdf50;
		border-radius: 23rpx;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #d7443e;
		line-height: 45rpx;
	}

	.album {
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffdf50;
	}

	.upload_icon {
		width: 30rpx;
		height: 30rpx;
	}

	.albums {
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #c8c8c8;
		line-height: 38rpx;
		text-align: center;
	}

	.album_item {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		div{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 10;
		}
	}

	.album_item_img {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.invite {
		background-image: url(../../static/images/fulibg.png);
		width: 100%;
		height: 80rpx;
		background-size: cover;
		background-repeat: no-repeat;
		padding: 0 40rpx;
		font-size: 25rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #d7443e;
	}

	.invite_icon {
		width: 50rpx;
		height: 50rpx;
	}

	.invite_text {
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffdf50;
	}

	.list_item {
		padding: 20rpx 0 15rpx;
		font-size: 25rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #fff;
		border-bottom: 1rpx solid rgba($color: #fff, $alpha: 0.03);

		.text {
			font-size: 21rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #dcdcdc;
		}
	}

	.item_img {
		width: 40rpx;
		height: 40rpx;
	}

	.next_icon {
		width: 16rpx;
		height: 23rpx;
	}

	.pop_box {
		padding: 80rpx 70rpx 70rpx;

		.title {
			font-size: 31rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #000000;
		}

		.qr_code {
			width: 360rpx;
			height: 360rpx;
		}

		.text {
			font-size: 25rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #646464;
		}

		.btn {
			width: 360rpx;
			height: 90rpx;
			background: #d7443e;
			border-radius: 45rpx;
			font-size: 33rpx;
			font-family: Microsoft YaHei UI;
			font-weight: bold;
			color: #ffffff;
			line-height: 90rpx;
		}
	}

	.authentication_close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.pop_box2 {
		padding: 80rpx 70rpx 40rpx;
	}

	.evaluate {
		width: 200rpx;
		height: 35rpx;
		background: rgba($color: #000000, $alpha: 0.7);
		border-radius: 3rpx;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffc107;
		padding-left: 10rpx;
	}
	
	.popup {
		position: fixed;
		width: 100vw;
		height: 100vh;
		line-height: 100vh;
		top: 0;
		left: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, .7);
		box-sizing: border-box;
		display: flex;align-items: center;text-align:center; 
	
		.popup_imgs {
			display: block;
			width: 100%;
		}
		
		.popup_close{
			position: absolute;
			width: 50px;
			height: 50px;
			top: 20px;
			right: 20px;
		}
	}
</style>
